<template>
    <div class="get-coordinates">
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
            <el-form-item label-width="240px">
                <el-input v-model="dataForm.key" label-width="auto" placeholder="请输入具体位置信息" clearable  ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="getDataList()">设置</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div class="content">
        <el-form :model="CoordinateData" style="text-align: center">
            <el-form-item label="当前系统定位点:" label-width="140px"  style="display: inline-block" >
                <div style="fontSize: 20px;color: #000;"> {{ CoordinateData.chinese_location }} </div>
            </el-form-item>

        </el-form>
    </div>
    <el-dialog v-model="isShowCoordinate" title="重新设置经纬度信息">
        <el-form :model="searchData">
            <el-form-item label="地址" label-width="140px">
                <el-input v-model="searchData.chinese_location" autocomplete="off" />
            </el-form-item>

            <el-form-item label="纬度" label-width="140px">
                <el-input v-model="searchData.lng" autocomplete="off" />
            </el-form-item>

            <el-form-item label="经度" label-width="140px">
                <el-input v-model="searchData.lat" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
        <span class="dialog-footer">
            <el-button @click="isShowCoordinate = false">取消</el-button>
            <el-button type="primary" @click="confirmButton">设置新坐标</el-button>
        </span>
        </template>
    </el-dialog>
    

    <el-dialog v-model="isShowSearchFail" title="查询失败">
        <el-form :model="searchData">
            <el-form-item label="查询结果:" label-width="140px">
                <!-- <el-input v-model="searchFail" autocomplete="off" disabled class="search-fail"/> -->
                <div style="color: red">{{ searchFail }}</div>
            </el-form-item>


        </el-form>
        <template #footer>
        <span class="dialog-footer">
            <el-button type="primary" @click="isShowSearchFail = false;" >确认</el-button>
        </span>
        </template>
    </el-dialog>

</template>

<script>
import {getAdress, setNewAdress} from '../../api/CoordinateAdmin';
import { ElMessage} from 'element-plus';
import axios from 'axios';
axios.defaults.baseURL='/map';


export default {
    name: 'CoordinateAdmin',
    created(){
        getAdress().then(resolve => {
            if(resolve.data.records[0]){
                this.CoordinateData = {
                    lat: resolve.data.records[0].localtionLatitude,
                    lng: resolve.data.records[0].localtionLongitude,
                    chinese_location: resolve.data.records[0].localtionName,
                    createTime: resolve.data.records[0].createTime
                }
            };

        })

    },
    data(){
        return{
            dataForm: {
                key: ''
            },
            searchData:{
                lat: '', // 经度
                lng: '' //  维度
            },
            isShowCoordinate: false,
            CoordinateData:{
                chinese_location: '北京市海淀区上地十街10号',
                lng:116.30788714718405,
                lat:40.05722044508724,
                
            },
            isShowSearchFail: false,
            searchFail: '您输入的地址有误,请输入准确地址信息如(北京市海淀区上地十街10号)'
        }
    },
    methods: {
        getDataList(){
            this.searchData.chinese_location = this.dataForm.key;

            if(this.dataForm.key){
                // 查询地址经纬度
                axios("/geocoding/v3/?address=" + this.dataForm.key + "&output=json&ak=rMfbNoIdcQKPcqA1rEjF9A8xGICCO9pm&callback=showLocation").then((resolve) => {
                    function showLocation(data){
                        return data;
                    };
                    const data = eval(resolve.data);

                    if(data.status == 1){
                        this.isShowSearchFail = true;
                    }

                    if(data.status == 0){
                        this.searchData.lng = data.result.location.lng;
                        this.searchData.lat = data.result.location.lat;
                        this.isShowCoordinate = true;
                    }

                })
            }
        },
        // 设置为新坐标
        confirmButton(){
            this.isShowCoordinate = false;
            const data = {
                    localtionLatitude: this.searchData.lat,
                    localtionLongitude: this.searchData.lng,
                    localtionName: this.searchData.chinese_location,
                    createTime: new Date().getTime
            };
            setNewAdress(data).then((resolve) => {

                console.log(resolve);
                if('请求成功'){
                    axios({
                        method: 'get',
                        url: '/localtionInfo/getPageInfo',
                        baseURL: '/api',
                        params: {
                            page: 1,
                            pageSize: 10,
                        }
                    }).then(resolve => {
                        if(resolve.data.data.records[0]){
                            this.CoordinateData = {
                                lat: resolve.data.data.records[0].localtionLatitude,
                                lng: resolve.data.data.records[0].localtionLongitude,
                                chinese_location: resolve.data.data.records[0].localtionName,
                                createTime: resolve.data.data.records[0].createTime
                            }
                        }
                    })

                }
            },reject => {
                if(reject.code == "ERR_BAD_RESPONSE"){
                    ElMessage.error("服务器未响应")
                }
            })
        }
    }


}
</script >
    
<style lang="scss">
    .get-coordinates{
        width: 100%;
    }

    .content{
        width: 100%;
        padding-bottom: 15px;
        padding-top: 15px;
        background-color: #ffffff;

        .el-input__inner{
            width:200px;
        }
    }

    .search-fail{
        color: red;
    }
</style>


lat: 31.305599271425
lng: 121.61572602417026